import { useCommonStore } from '@/hooks/useCommonStore';
import { Badge } from 'antd';

export interface Station {
  id: string;
  stationName: string;
  stationEn: string;
  transferLine: {
    lineCode: string;
    lineShortName: string;
    lineColor: string;
  }[];
  stationLongitude: string;
  stationLatitude: string;
  stationStatus: string;
}

interface Props {
  lineColor: string;
  lineCode: string;
  stations: Station[];
  onUpdate?: (id: string) => void;
  onDelete?: (id: string) => void;
}

const StationLine = (props: Props) => {
  const { lineColor, lineCode, stations, onUpdate, onDelete } = props;
  const { theme } = useCommonStore();
  const navigate = useNavigate();

  const [hoverDelete, setHoverDelete] = useState<string | null>(null);

  const styles = {
    table: 'w-full',

    tableRow: `${theme === 'dark' ? 'hover:bg-[#1d1d1d]' : 'hover:bg-[#cccccc]'} relative`,
    oddRow: '',
    evenRow: theme === 'dark' ? 'bg-[#141414]' : 'bg-[#ececec]',

    delBtn:
      'w-5 h-5 rounded-full flex items-center justify-center bg-red text-white cursor-pointer z-1 text-2 font-700',

    dotCell: 'w-10 flex items-center justify-center',
    dot: `w-3 h-3 rounded-full z-1`,

    line: 'w-0.8 absolute z-0',
    lineTop: ` h-1/2 top-1/2`,
    lineBottom: `h-1/2 bottom-1/2`,
    lineDefault: 'h-1/1',

    tableCell: 'py-2 pr-5',
    stationName: `text-sm font-bold ${theme === 'dark' ? 'text-white' : 'text-black'}`,
    stationNameEn: 'text-sm text-gray-500',
  };

  const renderStation = (station: Station, index: number) => {
    const isTop = index === 0;
    const isEnd = index === stations.length - 1;
    const rowStyle = index % 2 === 0 ? styles.evenRow : styles.oddRow;
    let lineStyle;
    if (isTop) {
      lineStyle = styles.lineTop;
    } else if (isEnd) {
      lineStyle = styles.lineBottom;
    } else {
      lineStyle = styles.lineDefault;
    }
    return (
      <tr
        className={`${styles.tableRow} ${rowStyle}`}
        onMouseEnter={() => setHoverDelete(station.id)}
        onMouseLeave={() => setHoverDelete(null)}
        key={station.id + index}
      >
        <td>
          <div className={styles.dotCell}>
            {hoverDelete === station.id && onDelete ? (
              <DeleteBtn
                name={station.stationName}
                handleDelete={() => onDelete(station.id)}
                render={() => <div className={styles.delBtn}>✕</div>}
              />
            ) : (
              <span className={`${styles.dot}`} style={{ backgroundColor: lineColor }}></span>
            )}
            <span
              className={`${styles.line} ${lineStyle}`}
              style={{ backgroundColor: lineColor }}
            ></span>
          </div>
        </td>

        <td className={styles.tableCell} onClick={() => onUpdate?.(station.id)}>
          <div
            className={styles.stationName}
            style={{ opacity: station.stationStatus === 'SERVING' ? 1 : 0.3 }}
          >
            {station.stationName}
          </div>
          <div className={styles.stationNameEn}>{station.stationEn}</div>
        </td>

        <td>
          <div className={'gap-10px'}>
            {station.transferLine.map(
              (line, index) =>
                lineCode !== line.lineShortName && (
                  <Badge
                    count={line.lineShortName}
                    showZero
                    color={line.lineColor}
                    onClick={() => navigate(`/metro/line/${line.lineCode}`)}
                    className={'hover:cursor-pointer'}
                    key={index + lineCode}
                  />
                ),
            )}
          </div>
        </td>
      </tr>
    );
  };

  return (
    <div>
      <table className={styles.table}>
        <tbody>{stations.map((station, index) => renderStation(station, index))}</tbody>
      </table>
    </div>
  );
};

export default StationLine;
